<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btn1Click">按钮</button>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        letters: ['a', 'b', 'c', 'd']
      },
      methods: {
        btn1Click() {
          // 1.push方法
          // this.letters.push('aaa')
          // this.letters.push('aaa', 'bbb', 'ccc') ✅

          // 2.pop方法  -- 删除数组中的最后一个元素
          // this.letters.pop()

          // 3.shift() -- 删除数组中的第一个元素
          // this.letters.shift();

          // 4.unshift() -- 在数组最前面添加元素
          // this.letters.unshift('gogogo')
          // this.letters.unshift('gogogo', 'ffff') ✅

          // 5.splice作用:删除元素/插入元素/替换元素
          // 删除元素:第二个参数传入你要删除几个元素,(如果没有传,就删除后面所有的元素)
          // 替换元素:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素,this.letters.splice(1, 3, 'mm', 'nn', 'll') --> 可以理解为先删除了然后添加进来(删除的位置)
          // 插入元素:第二个参数传入0,并且后面跟上要插入的元素
          // 5.splice(start,)  -- 方法本身返回(被删除/被替换)的元素 [插入的话不会返回 是空数组]
          // console.log(this.letters.splice(1, 2)); // 删除
          // console.log(this.letters.splice(1, 2, 'x', 'y')); // 替换
          // console.log(this.letters.splice(1, 0, '1', '2')); // 插入

          // 6.sort() 排序
          // this.letters.sort()

          // 7.reverse() 反转
          // this.letters.reverse()


          // 注意:不会响应式改变!!!!!!!!!!!!!!!!!!!         
          // 1.通过索引值修改数组中的元素
          // this.letters[0] = 'aaaa'
          // 改成下面的方式,可以响应式改变
          // this.letters.splice(0, 1, 'aaaaa')

          // set(要修改的对象,索引值,修改后的值)
          Vue.set(this.letters, 0, 'aaaa')


        }
      }
    });
  </script>
</body>

</html>